<template>
  <!-- 通过el-row和el-col实现四个卡片的布局(一行四列) -->
  <el-row :gutter="20">
    <el-col :span="6">
        <TotalSale :report-data="reportData" />
    </el-col>
    <el-col :span="6">
      <TotalOrder :report-data="reportData" />
    </el-col>
    <el-col :span="6">
      <TodayUser :report-data="reportData" />
    </el-col>
    <el-col :span="6">
      <TotalUser :report-data="reportData" />
    </el-col>
  </el-row>
</template>

<script setup>
import { ref,onMounted } from 'vue';

import TodayUser from './TodayUser.vue';
import TotalOrder from './TotalOrder.vue';
import TotalSale from './TotalSale.vue';
import TotalUser from './TotalUser.vue';

import { getReportData } from '@/api/index.js'

const reportData = ref({})

onMounted(async () => {
  reportData.value = await getReportData()
  // console.log(reportData.value)
})

</script>

<style lang="scss" scoped>
:deep(span) {
  font-size: 14px;
  color: #464545;
  &.css-1 {
    margin-left: 8px;
    font-weight: 550;
  }
  &.increase {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 10px;
    border-width: 4px;
    border-color: transparent transparent green transparent;
    border-style: solid;
    transform: translateY(-50%);
  }}
</style>